<template>
  <zl-select-popover
    v-model="value"
    :get-url="getData"
    :is-multiple="false"
    label-key="label"
    value-key="value"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ZlSelectPopover } from '@zl-crud/components'
import '@zl-crud/components/select-popover/style/index'

const value = ref('')

// 模拟数据获取函数
const getData = (params) => {
  // 实际使用中这里应该是调用后端接口
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          { label: '选项1', value: '1', desc: '描述1' },
          { label: '选项2', value: '2', desc: '描述2' },
          { label: '选项3', value: '3', desc: '描述3' }
        ]
      })
    }, 300)
  })
}
</script>